<script setup lang="ts">
import * as echarts from "Echarts";
import { onMounted, ref } from "vue";
const charts = ref(null);
onMounted(() => {
  if (charts.value) {
    const myChart = echarts.init(charts.value);
    const data = {
      name: "后台",
      children: [
        {
          name: "AggregateExpression",
          value: 1616,
          collapsed: true,
        },
        {
          name: "FlareVis",
          collapsed: true,
          children: [
            {
              name: "DragForce",
              value: 1082,
            },
            {
              name: "GravityForce",
              value: 1336,
            },
            {
              name: "Spring",
              value: 2213,
            },
            {
              name: "SpringForce",
              value: 1681,
            },
          ],
        },
        {
          name: "scale",
          collapsed: true,
          children: [
            {
              name: "IScaleMap",
              value: 2105,
            },
            {
              name: "LinearScale",
              value: 1316,
            },
            {
              name: "LogScale",
              value: 3151,
            },
            {
              name: "heap",
              children: [
                {
                  name: "FibonacciHeap",
                  value: 9354,
                },
                {
                  name: "HeapNode",
                  value: 1233,
                },
              ],
            },
          ],
        },
      ],
    };
    var option = {
      tooltip: {
        trigger: "item",
        triggerOn: "mousemove",
      },
      series: [
        {
          type: "tree",
          data: [data],
          top: "1%",
          left: "7%",
          bottom: "1%",
          right: "20%",
          symbolSize: 7,
          label: {
            position: "left",
            verticalAlign: "middle",
            align: "right",
            fontSize: 9,
          },
          leaves: {
            label: {
              position: "right",
              verticalAlign: "middle",
              align: "left",
            },
          },
          emphasis: {
            focus: "descendant",
          },
          expandAndCollapse: true,
          animationDuration: 550,
          animationDurationUpdate: 750,
        },
      ],
    };
    myChart.setOption(option);
  }
});
</script>

<template>
  <div class="charts" ref="charts" style="width: 600px; height: 400px"></div>
</template>

<style lang="scss" scoped></style>
